function render(elem, url, title, cols, area, func) {
    layui.use(['table', 'layer', 'jquery', 'form', 'laydate'], () => {
        let table = layui.table,
            layer = layui.layer,
            $ = layui.jquery,
            form = layui.form,
            laydate = layui.laydate;
        let dict = getDict();
        let tableIns = table.render({
            elem: '#'.concat(elem)
            , url: crossOrigin.concat(url.query)
            , method: 'GET'
            , toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: title.concat('数据表')
            , cols: cols
            , page: true
            , done: (e) => {
                if (!isEmpty(func) && !isEmpty(func.done)) func.done(e);
            }
        });


        //头工具栏事件
        table.on('toolbar(' + elem + ')', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id);
            let data = checkStatus.data;
            switch (obj.event) {
                case 'batchDelete':
                    if (data.length < 1) return layer.msg("当前未选中");
                    layer.confirm('此操作不可逆,您确认要删除吗?', {title: '警告', shade: 0}, (index) => {
                        let ids = [];
                        for (let item of data) {
                            ids.push(item.id);
                        }
                        let jsonStr = JSON.stringify(ids);
                        let params = jsonStr.substring(1, jsonStr.length - 1);
                        ajax(url.batchDelete.concat("/").concat(params), "DELETE", "", (res) => {
                            updateResultHandle(res)
                        });
                    });
                    break;
                case 'insert' :
                    layer.open({
                        title: "创建".concat(title),
                        type: 2,
                        area: area,
                        shadeClose: true,
                        fixed: true,
                        resize: false,
                        content: [url.template.concat("?method=insert"), 'no'],
                    });
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
        });

        //监听行工具事件
        table.on('tool(' + elem + ')', function (obj) {
            let data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('此操作不可逆,您确认要删除吗?', {title: '警告'}, function (index) {
                    obj.del();
                    ajax(url.delete.concat("/").concat(data.id), "DELETE", "", (res) => {
                        updateResultHandle(res);
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    title: ['编辑'.concat(title), 'font-size:18px'],
                    type: 2,
                    area: area, //宽高,
                    shadeClose: true, //点击遮罩关闭
                    content: [url.template, 'no'],
                    fixed: true,
                    resize: false,
                    scrollbar: true,
                    success: (layero, idx) => {
                        //获取iframe子窗口DOM节点
                        let updateForm = layer.getChildFrame('.layui-form', idx);
                        let iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        for (let elem of updateForm[0]) {
                            let name = elem.name, type = elem.type;
                            // 表单控件name不为空和与之相匹配的单元格数据不为空
                            if (type === "password") {
                                elem.value = data[type];
                            }
                            if (!isEmpty(name) && !isEmpty(data[name])) {
                                let value = data[name];
                                if (type === "text" || type === "hidden") {
                                    elem.value = value;
                                } else if (type === "radio" && elem.value === value) {
                                    $(elem).next().click();
                                } else if (type === "checkbox" && value === "banned") {
                                    $(elem).attr("checked", true);
                                }
                            }
                            // 表单控件类型为下拉列表并且匹配的字典数据不为空,用字典数据渲染下拉框
                            if (type === "select-one" && !isEmpty(dict[name])) {
                                let selectValue = dict[name];
                                selectRender(elem, selectValue, data[name]);
                            } else if (type === "select-one") {
                                // 无与之相匹配的字典数据,从后端接口获取
                                if (!isEmpty(url.select) && !isEmpty(url.select[name])) { // 判断是否存在接口url
                                    let queryUrl = url.select[name];
                                    let isParamIndex = queryUrl.lastIndexOf("?");
                                    if (isParamIndex !== -1) {
                                        let paramName = queryUrl.substring(isParamIndex + 1);
                                        queryUrl = queryUrl.replace("?", "/").replace(paramName, data[paramName]);
                                    }
                                    ajax(queryUrl, "GET", "", (res) => {
                                        if (res.code === 0) {
                                            let source = res.data;
                                            selectRender(elem, source, data[name]);
                                            iframeWin.formRender();
                                        }
                                    });
                                }
                            }
                        }
                        //调用子窗口方法,表单重渲染
                        iframeWin.formRender();
                    },
                    yes: (layero, idx) => {
                        layer.close(idx);
                    },
                    cancel: (idx, layero) => {
                        layer.close(idx);
                    }
                })
            }
        });

        form.on('submit(query)', (data) => {
            let queryParams = filterFormOnNull(data.field);
            tableIns.reload({
                method: 'GET',
                where: queryParams,
                page: {curr: 1, limit: 10}
            });
            return false;
        });

        /* 更新请求结果处理 */
        function updateResultHandle(res) {
            let icon = 2;
            if (res.code === 0) {
                icon = 1;
                layui.table.reload(elem);
            }
            layer.msg(res.msg, {icon: icon, offset: 'rt'});
        }
    });
}


/**
 *
 * 查询表单下拉框渲染
 * @param form 表单FORM对象
 * @param data 下拉框数据集
 */
function queryFormSelectRender(form, data) {
    for (let elem of form) {
        let type = elem.type;
        if (type === "select-one") {
            let name = elem.name;
            selectRender(elem, data[name]);
        }
    }
}

/**
 * @param elem 绑定的select元素
 * @param source 填充的数据
 * @param selected 选中项值
 */
function selectRender(elem, source, selected) {
    layui.use(['jquery', 'form'], () => {
        let $ = layui.jquery, form = layui.form;
        let isSelected = isEmpty(selected);
        let i = 1;
        for (let key in source) {
            $(elem).append(new Option(source[key], key));
            if (!isSelected && $(elem.options[i]).val() === selected.toString()) {
                elem.options[i].selected = true;
            }
            i++;
        }
        form.render("select");
    });
}